<template>
  <div class="router-template">
    <!--<div class="template-wrap">-->
    <!--&lt;!&ndash;{{$route.name}}&ndash;&gt;-->
    <!--</div>-->
    <div>
      <el-card class="box-card" v-if="isShow">
        <div slot="header" class="clearfix">
          <span> 任务列表</span>
          <el-button style="float: right; padding: 8px; margin-top:-5px; margin-left:10px;" @click="qxClick">省局权限
          </el-button>
          <el-button @click="addList" style="float: right; padding: 8px; margin-top:-5px;">新增任务</el-button>
        </div>

        <el-table
          :data="tableData"
          border
          height="320"
          max-height="360"
          style="width: 100%">
          <el-table-column header-align="center" label="状态" min-width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 0">
                <el-tag>等待</el-tag>
              </div>
              <div v-if="scope.row.status===1">
                <el-tag type="success">已上报</el-tag>
              </div>
              <div v-if="scope.row.status===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
              <div v-if="scope.row.status===3">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.status===4">
                <el-tag type="success">下达任务</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" prop="name" label="产品名称" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="reasons" label="抽查理由" min-width="100px"></el-table-column>
          <!--<el-table-column header-align="center" prop="batch" label="抽查批次" min-width="100px"></el-table-column>-->
          <el-table-column header-align="center" prop="number" label="每批次抽样数量" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="year" label="实施年份" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="batches" label="实施批次" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="other" label="其他类别" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="details" label="抽查实施细则" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="authorization" label="授权证书有效期"
                           min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="metering" label="计量认证有效期" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="laboratory" label="实验室认可有效期" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="test" label="上报检验结果时间" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="budget" label="申报经费预算" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="enterprise" label="抽查企业" min-width="100px"></el-table-column>
          <el-table-column header-align="center" label="操作" width="300" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tooltip content="修改" placement="bottom" effect="light">
                <el-button @click="toEdit(scope.$index)" size="small">
                  修改
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="bottom" effect="light">
                <el-button @click="deleteClick(scope.$index)" size="small">
                  删除
                </el-button>
              </el-tooltip>
              <el-tooltip content="上报任务" placement="bottom" effect="light">
                <el-button @click="upClick(scope.$index)" size="small">
                  上报任务
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>


      <el-card class="box-card" v-show="!isShow">
        <div slot="header" class="clearfix">
          <span> 任务列表</span>

          <el-button style="float: right; padding: 8px; margin-top:-5px; margin-left:10px;" @click="qxClick">检验机构权限
          </el-button>
          <el-button @click="addList" style="float: right; padding: 8px; margin-top:-5px;">新增任务</el-button>

        </div>
        <el-table
          :data="tableData"
          border
          height="320"
          max-height="360"
          style="width: 100%">
          <el-table-column header-align="center" label="状态" min-width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 0">
                <el-tag>等待</el-tag>
              </div>
              <div v-if="scope.row.status===1">
                <el-tag type="success">已上报</el-tag>
              </div>
              <div v-if="scope.row.status===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
              <div v-if="scope.row.status===3">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.status===4">
                <el-tag type="success">下达任务</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" prop="name" label="产品名称" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="reasons" label="抽查理由" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="batch" label="抽查批次" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="number" label="每批次抽样数量" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="year" label="实施年份" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="batches" label="实施批次" min-width="100px"></el-table-column>
          <!--<el-table-column header-align="center" prop="other" label="其他类别" min-width="100px"></el-table-column>-->
          <el-table-column header-align="center" prop="details" label="抽查实施细则" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="authorization" label="授权证书有效期"
                           min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="metering" label="计量认证有效期" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="laboratory" label="实验室认可有效期" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="test" label="上报检验结果时间" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="budget" label="申报经费预算" min-width="150px"></el-table-column>
          <el-table-column header-align="center" prop="enterprise" label="抽查企业" min-width="100px"></el-table-column>
          <el-table-column header-align="center" label="操作" width="300" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tooltip content="驳回" placement="bottom" effect="light">
                <el-button @click="toBack(scope.$index)" size="small">
                  驳回
                </el-button>
              </el-tooltip>
              <el-tooltip content="通过" placement="bottom" effect="light">
                <el-button @click="conformClick(scope.$index)" size="small">
                  通过
                </el-button>
              </el-tooltip>
              <el-tooltip content="下达任务" placement="bottom" effect="light">
                <el-button @click="conformClick2(scope.$index)" size="small">
                  下达任务
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    },
    computed: {
      tableData: function () {
        console.log(this.$store.state.taskList)
        return this.$store.state.taskList;
      }
    },
    mounted() {
      // this.getTypeList();
      // this.butPerm();
    },
    methods: {
      qxClick() {
        this.isShow = !this.isShow;
      },
      upClick(data) {
        console.log(data);
        this.$store.commit('change_task_list', {
          "index": data,
          "status": 1
        });
      },
      toEdit(data) {
        this.$router.push({path: 'taskedit', query: {rows: data}})
      },
      toBack(data) {
        //2代表驳回
        this.$store.commit('change_task_list', {
          "index": data,
          "status": 2
        });
      },
      conformClick(data) {
        //3代表同意
        this.$store.commit('change_task_list', {
          "index": data,
          "status": 3
        });
      },
      conformClick2(data) {
        //4代表下达任务
        this.$store.commit('change_task_list', {
          "index": data,
          "status": 4
        });
      },
      addList() {
        // this.tableData.push('{}')
        this.$router.push({path: '/taskadd'})
      },
      deleteClick(data) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          // console.log(data)
          this.tableData.splice(data, 1)
          self.$message.error('提交失败！' + err);

        }).catch(() => {
        })
      },
      addClick() {
        this.$router.push({path: 'typeAddEdit'})
      },


    }
  }
</script>
<style>

</style>
